<template>
	<view class="plant-page">
		<!-- 筛选条件 -->
		<uni-section title="筛选条件" type="line">
			<view class="filter-box">
				<!-- 状态选择 -->
				<uni-data-checkbox v-model="selectedStatus" :localdata="statusOptions"></uni-data-checkbox>

				<!-- 时间选择 -->
				<view class="date-box">
					<uni-datetime-picker type="date" v-model="startDate" placeholder="开始时间" />
					<uni-datetime-picker type="date" v-model="endDate" placeholder="结束时间" />
				</view>
			</view>
		</uni-section>

		<!-- 种植管理列表 -->
		<uni-section title="种植管理列表" type="line">
			<view class="plant-list">
				<uni-card v-for="(item, index) in filteredList" :key="index" :is-shadow="false">
					<view class="card-content">
						<!-- 图片 -->
						<image src="/static/logo.png" class="plant-img" mode="aspectFill" />

						<!-- 基本信息 -->
						<view class="info">
							<text class="title">{{ item.plot }} - {{ item.crop }}</text>
							<text class="detail">详情：{{ item.detail }}</text>
							<text class="detail">育苗日期：{{ item.seedDate }}</text>
							<text class="detail">生长进度：{{ item.progress }}</text>
							<text class="detail">负责人：{{ item.manager }}</text>
						</view>
					</view>
				</uni-card>
			</view>
		</uni-section>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 状态选项
	const statusOptions = [{
			text: '全部',
			value: 'all'
		},
		{
			text: '进行中',
			value: 'ongoing'
		},
		{
			text: '已结束',
			value: 'finished'
		}
	]
	const selectedStatus = ref('all')
	const today = formatDate(new Date())

	// 默认值就是今天
	const startDate = ref(today)
	const endDate = ref(today)

	// 获取今天日期并格式化为 yyyy-MM-dd
	function formatDate(date) {
		const y = date.getFullYear()
		const m = String(date.getMonth() + 1).padStart(2, '0')
		const d = String(date.getDate()).padStart(2, '0')
		return `${y}-${m}-${d}`
	}

	// 模拟数据
	const plantList = ref([{
			img: '/static/img/rice.jpg',
			plot: '地块A',
			crop: '水稻',
			detail: '水稻育苗阶段，需保持湿度',
			seedDate: '2025-11-17',
			progress: '育苗中',
			manager: '张三',
			status: 'ongoing'
		},
		{
			img: '/static/img/wheat.jpg',
			plot: '地块B',
			crop: '小麦',
			detail: '小麦已收割完成',
			seedDate: '2025-11-15',
			progress: '已收割',
			manager: '李四',
			status: 'finished'
		}
	])

	// 筛选逻辑
	const filteredList = computed(() => {
		return plantList.value.filter(item => {
			// 状态筛选
			if (selectedStatus.value !== 'all' && item.status !== selectedStatus.value) {
				return false
			}
			// 时间筛选
			if (startDate.value && item.seedDate < startDate.value) return false
			if (endDate.value && item.seedDate > endDate.value) return false
			return true
		})
	})
</script>

<style lang="scss" scoped>
	.plant-page {
		// padding: 20rpx;

		.filter-box {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 0 30rpx;

			.date-box {
				display: flex;
				gap: 20rpx;

				.uni-datetime-picker {
					flex: 1;
				}
			}
		}

		.plant-list {
			margin-top: 20rpx;

			.uni-card {
				margin-bottom: 20rpx;

				.card-content {
					display: flex;
					flex-direction: row;
					gap: 20rpx;

					.plant-img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 8rpx;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 8rpx;

						.title {
							font-weight: bold;
							font-size: 28rpx;
						}

						.detail {
							font-size: 24rpx;
							color: #555;
						}
					}
				}
			}
		}
	}
</style>